<template>
  <main class="login-form-box">
    <van-form class="login-form" @submit="onSubmit">
      <van-cell-group inset>
        <template v-if="step == 1">
          <!-- :rules="[{ required: true, message: '请输入手机号' }]" -->
          <van-field v-model="formState.phone" placeholder="请输入手机号">
            <template #left-icon>
              <img class="left-icon" src="@/assets/login_ic_phone.png" alt="" />
            </template>
            <template #button>
              <div @click="getCode" class="code">
                {{ !timer ? "发送验证码" : `${time}s后重新获取` }}
              </div>
            </template>
          </van-field>
          <!-- :rules="[{ required: true, message: '请输入验证码' }]" -->
          <van-field
            v-model="formState.code"
            clearable
            placeholder="请输入验证码"
          >
            <template #left-icon>
              <img class="left-icon" src="@/assets/login_ic_code.png" alt="" />
            </template> </van-field
        ></template>

        <template v-else>
          <!-- :rules="[{ required: true, message: '请输入新密码' }]" -->
          <van-field
            v-model="formState.password"
            :type="!eye1Status ? 'password' : 'text'"
            placeholder="6-16位数字、英文或下划线"
          >
            <template #left-icon>
              <img
                class="left-icon"
                src="@/assets/login_ic_password.png"
                alt=""
              />
            </template>
            <template #right-icon>
              <img
                class="right-icon"
                :src="eye1Status ? login_ic_visible : login_ic_invisible"
                alt=""
                @click="swtichEye(1)"
              />
            </template>
          </van-field>
          <!-- :rules="[
            { required: true, message: '请输入新密码' },
            {
              validator: validatorPwd,
              message: '两次密码不一致',
            },
          ]" -->
          <van-field
            v-model="formState.newPassword"
            :type="!eye2Status ? 'password' : 'text'"
            placeholder="请再次确认新密码"
          >
            <template #left-icon>
              <img
                class="left-icon"
                src="@/assets/login_ic_password.png"
                alt=""
              />
            </template>
            <template #right-icon>
              <img
                class="right-icon"
                :src="eye2Status ? login_ic_visible : login_ic_invisible"
                alt=""
                @click="swtichEye(2)"
              />
            </template>
          </van-field>
        </template>
      </van-cell-group>
      <div class="submit-box">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :class="[
            'login-btn',
            step && (!formState.phone || !formState.code) && 'disabled',
          ]"
          >{{ step == 1 ? "下一步" : "完成" }}</van-button
        >
      </div>
    </van-form>
  </main>
</template>

<script setup>
import { useStoreUser } from "@/store";
import {
  postAgentAuthCheckCode,
  postAgentAuthPhoneCode,
  postAgentAuthResetPwd,
} from "@/api";
import { Notify } from "vant";
import login_ic_visible from "@/assets/login_ic_visible.png";
import login_ic_invisible from "@/assets/login_ic_invisible.png";
const storeUser = useStoreUser();
const router = useRouter();
const formState = reactive({
  code: "",
  phone: "",
  uuid: "",
  password: "",
  newPassword: "",
});

const step = ref(1);

const eye1Status = ref(false);
const eye2Status = ref(false);
const timer = ref(null);
const time = ref(60);
const validatorPwd = (val) => {
  return val == formState.password;
};
function swtichEye(type) {
  if (type == 1) {
    eye1Status.value = !eye1Status.value;
  } else {
    eye2Status.value = !eye2Status.value;
  }
}

function getCode() {
  if (!timer.value) {
    if (!formState.phone) {
      Notify({ type: "danger", message: "请输入手机号码!" });
      return;
    }
    postAgentAuthPhoneCode({
      phone: formState.phone,
    }).then((res) => {
      timer.value = setInterval(() => {
        time.value--;
        if (time.value == 0) {
          clearInterval(timer.value);
          timer.value = null;
        }
      }, 1000);
    });
  }
}

const onSubmit = () => {
  const { code, password, phone, newPassword, uuid } = formState;

  if (step.value == 1) {
    if (!code || !phone) {
       Notify({ type: "danger", message: "手机号或验证码不能为空!" });
      return;
    }
    postAgentAuthCheckCode({
      code,
      phone,
    }).then((res) => {
      formState.uuid = res.data.uuid;
      step.value = 2;
    });
  } else {
    const reg = /^[a-zA-Z0-9_]{6,16}$/;
    if (!reg.test(password)) {
      Notify({
        type: "danger",
        message: "密码格式须为6-16位数字、英文或下划线!",
      });
      return;
    } else if (
      !newPassword ||
      !reg.test(newPassword) ||
      newPassword != password
    ) {
      Notify({ type: "danger", message: "新旧密码不一致" });
      return;
    }
    postAgentAuthResetPwd({
      code,
      uuid,
      password,
      phone,
    }).then((res) => {
      Notify({ type: "success", message: "重置成功!" });
      router.go(-1);
    });
  }
};
</script>

<style scoped lang="less">
.login-form-box {
  background: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  padding-top: 56px;

  :deep(.login-form) {
    // margin-top: 56px;
    padding: 24px 0;
    .logo {
      position: absolute;
      left: 50%;
      top: -80px;
      transform: translate(-50%, -100%);
      width: 150px;
      height: 150px;
      border-radius: 50%;
      // background: #ccc;
    }
    .left-icon {
      width: 48px;
      height: 48px;
      margin-right: 24px;
    }
    .right-icon {
      width: 48px;
      height: 48px;
    }
    .van-cell-group {
      background: transparent;
      margin: 0 50px;
    }
    .van-cell {
      background: #fff;
      // border-radius: 44px;
      // margin-bottom: 16px;
      border-radius: 10px;
      margin-bottom: 36px;
      align-items: center;
      padding: 0;
      padding-bottom: 45px;
      font-size: 32px;
      border-bottom: 1px solid #eaecee;
    }
    .code {
      min-width: 176px;
      height: 48px;
      border-radius: 28px;
      border: 3px solid #f5b243;
      font-size: 26px;
      color: #f5b243;
      text-align: center;
      padding: 0 10px;
    }
    .van-field__left-icon,
    .van-field__right-icon {
      display: flex;
      margin: 0;
    }
    .van-field__body {
      // height: 25px;
      height: 50px;
    }
    .iconfont {
      font-size: 40px;
    }
  }
}
.login-bg {
  height: 610px;
  // background: url('/src/assets/images/login_back.png') no-repeat;
  background-size: 100%;
  margin-bottom: 48px;
  overflow: hidden;

  .login-icon {
    display: inline-block;
    width: 100%;
  }
}
.submit-box {
  margin: 64px 32px 0;
}
.login-btn {
  // width: 60%;
  margin: 0 auto;
  height: 88px;
  box-shadow: 0px 2px 40px 0px rgba(255, 255, 255, 0.8);
  border-radius: 40px;
  background: #fedc00;
  color: #000;
  font-weight: 600;
  &.disabled {
    opacity: 0.4;
  }
  :deep(.van-button__text) {
    font-size: 30px;
  }
}
.tip-box {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  width: max-content;
  :deep(.van-checkbox__label) {
    font-size: 26px;
  }
  .tip {
    color: #f5af3e;
  }
}
</style>
